 <template>
    <div class="channel-edit-container">
        <van-cell class="my-channel" :border="false" center>
            <div slot="title" class="channel-title">
                我的频道
            </div>
            <van-button
                size="mini"
                round
                plain
                @click="isEdit = !isEdit"
            >
                {{ isEdit ? '完成' : '编辑' }}
            </van-button>
        </van-cell>
        <van-grid :gutter="10">
            <van-grid-item
                class="my-channel-item"
                v-for="(channel, index) in userChannels"
                :key="index"
                :text="channel.name"
                :class="index === active ? 'active' : null"
                @click="handleClick(index)"
            >
                <div class="icon-close" v-if="isEdit && index" slot="icon">
                    <van-icon
                        name="close"
                        @click="delChannel(channel.id, index)"
                    />
                </div>
            </van-grid-item>
        </van-grid>
        <van-cell :border="false">
            <div slot="title" class="channel-title">
                <span>频道推荐</span>
            </div>
        </van-cell>
        <van-grid :gutter="10">
            <van-grid-item
                v-for="channel in recommendChannels"
                :key="channel.id"
                :text="channel.name"
                @click="addChannel(channel)"
            />
        </van-grid>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import * as Api from 'api/common';
import { differenceBy } from 'lodash';
import { setItem } from '@/utils/storage';

export default {
    name: 'channel-edit',
    components: {
    },
    props: {
        userChannels: {
            type: Array,
            required: true
        },
        active: {
            type: Number,
            required: true
        }
    },
    // 定义属性
    data () {
        return {
            // newUserChannels: cloneDeep(this.userChannels),
            allChannels: [],
            isEdit: false
            // btnMsg: '编辑'
        };
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
        ...mapState(['user']),
        recommendChannels () {
            return differenceBy(this.allChannels, this.userChannels, 'id');
        }
    },
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        async getAllChannels () {
            const res = await Api.reqDev('/v1_0/channels');
            if (res.message === 'OK') {
                this.allChannels = res.data.channels;
            }
        },
        async addChannel (itemChannel) {
            if (!this.isEdit) this.userChannels.push(itemChannel);
            /**
             * 1,登入了，数据存储到线上
             * 2，未登入，数据存储到本地
            */
            if (this.user) {
                const data = {
                    id: itemChannel.id,
                    seq: this.userChannels.length
                };
                await Api.reqDev('/v1_0/user/channels', 'patch', {
                    data
                });
                // console.log(res);
            } else setItem('user-channels', this.userChannels);
        },
        handleClick (index) {
            if (!this.isEdit) this.$emit('toChannel', index);
        },
        async delChannel (id, index) {
            if (index <= this.active) this.$emit('update:active', this.active - 1);
            this.userChannels.splice(index, 1);
            if (this.user) {
                await Api.reqDev(`/v1_0/user/channels/${id}`, 'delete');
            } else setItem('user-channels', this.userChannels);
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {
        this.getAllChannels();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
    }
};
</script>

<style lang='less' scoped>
.channel-edit-container {
    padding-top: 54px;
    .my-channel {
        .van-cell__value {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .van-button {
                color: red;
                border-color: red;
                .van-button__content {
                    padding: 0 8px;
                }
            }
        }
        .channel-title {
            font-size: 16px;
            color: #333;
        }
    }
    .van-grid-item {
        width: 80px;
        height: 43px;
        /deep/ .van-grid-item__content {
            background: #f4f5f6;
            .van-grid-item__text {
                font-size: 14px;
                color: #222;
            }
            .icon-close {
                margin-top: -16px;
                margin-left: 32px;
                font-size: 16px;
                position: absolute;
            }
        }
    }
    .active {
        /deep/ .van-grid-item__text {
            color: red !important;
        }
    }
}
</style>
